<template>
  <div class="recipientsReturnAdd">
    <h4>设备领用</h4>
    <table class="table" rules="all" border="1" v-show="xinzeng">
      <tr>
        <td>领用单号</td>
        <td>
          <el-input v-model="addForm.receiveCode" placeholder="不填则自动生成"></el-input>
        </td>
        <td>领用时间</td>
        <td>
          <el-date-picker
            v-model="addForm.receiveDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td>领用人员</td>
        <td>
          <el-select style="width: 100%" v-model="addForm.receiveUserId" placeholder="请选择">
            <el-option
              v-for="item in receiveUser"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </td>
        <td>领用部门</td>
        <td>
          <treeSelect  style="width: 100%" size="small"  @department="departmentChange" :model="addForm.departmentName" type="department"></treeSelect>
        </td>
      </tr>
      <tr>
        <td>经手人</td>
        <td colspan="3">
          <el-input v-model="userName" :disabled="true"></el-input>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="3">
          <el-input type="textarea" :rows="2" v-model="addForm.remark"></el-input>
        </td>
      </tr>
    </table>
    <table class="tableb" border="1" rules="all"  v-show="!xinzeng" >
      <tr>
        <td>领用单号</td>
        <td>{{addForm.receiveCode}}</td>
        <td>领用时间</td>
        <td>{{addForm.receiveDate}}</td>
      </tr>
      <tr>
        <td>领用人员</td>
        <td>{{addForm.receiveUserName}}</td>
        <td>领用部门</td>
        <td>{{addForm.receiveDeptName}}</td>
      </tr>
      <tr>
        <td>经手人</td>
        <td colspan="3">{{addForm.receiveOperateUserName}}</td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="3">{{addForm.remark}}</td>
      </tr>
    </table>

    <h4>领用设备</h4>
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加设备</el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBtn">删除</el-button>
    <el-button type="success"  icon="el-icon-plus" size="mini" @click="saveBtn">提交</el-button>
    <el-table :data="addForm.receiveDetailAddDtoList"  border  @selection-change="handleSelectionChange" style="width:90%">
      <el-table-column align="center" type="selection" width="80"></el-table-column>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center"  label="设备编号" prop="deviceCode"/>
      <el-table-column align="center"  label="设备名称" prop="deviceName"/>
      <el-table-column align="center"  label="类别" prop="deviceTypeName"/>
      <el-table-column align="center"  label="品牌" prop="deviceBrandName"/>
      <el-table-column align="center"  label="规格型号" prop="deviceModel"/>
      <el-table-column align="center"  label="状态" prop="deviceStatusName"> </el-table-column>
      <el-table-column align="center" label="调入地点" property="receiveSiteId"  >
        <template slot-scope="scope">
          <addressSelect @addSelectChangedd="addSelectChangedd" :numdata="scope.$index" type="diaoruly"></addressSelect>
        </template>
      </el-table-column>
      <!--      <el-table-column align="center"  label="购置金额" prop="buyMoney"/>-->
      <el-table-column align="center"  label="预计归还时间" prop="expectReturnDate" width="240">
        <template slot-scope="scope">
          <el-date-picker
            :disabled="scope.row.isReturn==1"
            v-model="scope.row.expectReturnDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </template>
      </el-table-column>
    </el-table>
    <addDialog v-if="addShow" @selectChange="addSelect"></addDialog>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import treeSelect from '../../equipmentGL/equipmentTZ/treeSelect'
import request from '@/utils/request'
import addDialog from "./addDialog";
import addressSelect from "../../equipmentCZ/address";
export default {
  components:{
    addDialog,
    treeSelect,
    addressSelect
  },
  name: "recipientsReturnAdd.vue",
  data(){
    return{
      userName:Cookies.get("username"),
      xinzeng:true,
      leixing:'post',
      addForm:{
        receiveCode:'',
        receiveDate:'',
        receiveUser:'',
        operateUser:'',
        remark:'',
        deptId:'',
        receiveUserId:'',
        receiveDetailAddDtoList:[],
      },
      company: [],
      receiveUser:[],
      addShow:false,
      tableDatajihuaXZ:[],
    }
  },
  created() {
    this.leixing =this.$route.query.data.leixing
    this.getBgzrr()
    if(this.leixing=='put'){
      this.xinzeng = false
      this.getdata()
    }
  },
  methods:{
    //调入地点
    addSelectChangedd (data) {
      console.log('调入地点',data)
      if(data){
        this.addForm.receiveDetailAddDtoList[data.num].receiveSiteId =data.id
      }
    },
    //获取详情信息
    getdata:function () {
      request({
        url: '/device-receive-api/' + this.$route.query.data.id,
        method: 'get',
      }).then(response => {

        // this.addForm =response.data
        this.addForm.id = this.$route.query.data.id
        this.addForm.receiveCode = response.data.receiveCode
        this.addForm.receiveDate = response.data.receiveDate

        this.addForm.receiveDeptName = response.data.receiveDeptName
        this.addForm.receiveUserName = response.data.receiveUserName
        this.addForm.receiveOperateUserName = response.data.receiveOperateUserName
        this.addForm.remark = response.data.remark
        this.addForm.receiveDetailAddDtoList = JSON.parse(JSON.stringify(response.data.deviceParticularListVos))

      });
    },
    //表格复选框监听
    handleSelectionChange:function(row){
      this.tableDatajihuaXZ = row
      console.log(' this.tableDatajihuaXZ', this.tableDatajihuaXZ)

    },
    //删除
    deleteBtn:function () {
      for (var i=0;i< this.addForm.receiveDetailAddDtoList.length;i++){
        for(var j=0;j<this.tableDatajihuaXZ.length;j++){
          if(this.addForm.receiveDetailAddDtoList[i].deviceCode==this.tableDatajihuaXZ[j].deviceCode){//相等
            this.addForm.receiveDetailAddDtoList.splice(i,1)
          }

        }
      }
      this.fuzhiIndex()
    },
    //重新赋值index
    fuzhiIndex:function(){
      for (var i=0;i<this.addForm.receiveDetailAddDtoList.length;i++){
        this.addForm.receiveDetailAddDtoList[i].index =i
      }
    },
    /** 获取所属部门的值*/
    departmentChange(data) {
      this.addForm.receiveDeptId = data.id
      this.addForm.departmentName=data.label
    },
    //领用人员
    getBgzrr:function(){
      request({
        url: '/system/user/username',
        method: 'get',
      }).then(response => {
        this.receiveUser = response.data
      });

    },
    //添加设备
    add(){
      this.addShow = true
    },
    addSelect(data){
      this.addShow=false
      this.addForm.receiveDetailAddDtoList= this.deteleObject(this.addForm.receiveDetailAddDtoList.concat(data))
    },
    deteleObject:function(data){
      let hash = {};
      const data2 = data.reduce((preVal, curVal) => {
        hash[curVal.deviceCode] ? '' : hash[curVal.deviceCode] = true && preVal.push(curVal);
        return preVal
      }, [])
      return data2
    },
    saveBtn() {
      request({
        url: '/device-receive-api',
        method:this.leixing,
        data:this.addForm,
      }).then(response => {
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
        this.$router.push('/equipmentCZ/recipientsReturn')
      });

    },
    //删除
    del(row){
      this.$confirm('确定删除该数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style lang="scss">
.recipientsReturnAdd{
  margin-left:20px;
  h4{
    color: #05A380;
  }
  .el-button{
    margin-bottom:20px;
  }
  .btn{
    width:900px;
    text-align: center;
    margin-top:20px;
  }
  .table{
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    .el-input--medium .el-input__inner,.el-textarea .el-textarea__inner{
      border: none;
    }
    tr{
      td:nth-child(2n-1){
        width: 150px;
        text-align: center;
      }
      td{
        /*width:300px;*/
        line-height: 35px;
        .red{
          padding:0 3px;
          color:red;
        }
      }
    }
  }
  .tableb {
    width:900px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    .height {
      height: 120px;
    }
    tr {
      td:nth-child(2n-1) {
        width: 20%;
        text-align: center;
      }

      td:nth-child(2n) {
        width: 30%;
        padding-left: 10px;
      }

      td {
        line-height: 35px;

        .red {
          color: red;
        }
      }
    }
  }
  .status{
    color: white;
    width: 54px;
    height: 22px;
    display: inline-block;
    text-align: center;
  }
  .green{
    background: #78BF34;
  }
  .purple{
    background:#9E71DC
  }
  .red{
    background: red;
  }
}
</style>
